<template>
    <div class="h-full w-full">
        <div id="yqtarget" class="w-full h-full"></div>
    </div>
</template>

<script setup lang="ts">
import * as echarts from 'echarts'
import { onBeforeUnmount, onMounted, watch } from 'vue';
import type { Yuqing } from "@/apis/homeApi";

const props = defineProps({
    data: {
        type: Object as () => Yuqing,
        require: true,
    }
})

//初始化ecahrts实例
let myChart: echarts.ECharts
function resz(){
    myChart.resize();
}

onBeforeUnmount(()=>{
    window.removeEventListener('resize', resz);
})

onMounted(() => {

    myChart = echarts.init(document.getElementById('yqtarget') as HTMLDivElement)
    renderChart()
    
    window.addEventListener('resize', resz);

})
//构建option配置对象
const renderChart = () => {
    const option = {
        title: {
            text: '一年内全市舆情走势',
            // subtext: '总舆情数：' + '\xa0' + props.data!.YuQingShu,
            left: 'center',
            textStyle: {
                color: '#fff'
            },
            subtextStyle: {
                color: '#fff'
            }
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                crossStyle: {
                    color: '#999'
                }
            }
        },
        // toolbox: {
        //     feature: {
        //         dataView: { show: true, readOnly: false },
        //         magicType: { show: true, type: ['line', 'bar'] },
        //         restore: { show: true },
        //         saveAsImage: { show: true }
        //     }
        // },
        xAxis: {
            type: 'category',
            data: props.data!.YuQingFenZu,
            axisLabel: {
                rotate: 45,
                color: '#9eb1c8'
            },
            axisLine: {
                show: true,
            },
            axisTick: {
                show: false,
            },
        },
        yAxis: {
            type: 'value',
            name: 'count',
            min: 0,
            max: function (value: { max: number, min: number }) {
                return value.max * 1.5
            },
            //interval: 1,
            axisLine: {
                show: false,
            },
            axisTick: {
                show: false,
            },
            axisLabel: {
                show: false,
            },
            splitLine: {
                show: false
            }
        },
        //图标的位置
        grid: {
            top: 0,
            right: 0,
            bottom: 0,
            left: 30,
            containLabel: true,
        },
        //核心配置
        series: [
            {
                data: props.data!.YuQingShuJu,
                type: 'line',
                //字体
                label: {
                    show: true,
                    position: 'top',
                    color: '#fff'
                },
            },
            // {
            //     data: props.data!.YuQingShuJu,
            //     type: 'bar',
            //     //字体
            //     label: {
            //         show: false,
            //     },
            //     //showBackground:true,
            //     // backgroundStyle:{
            //     //   color:'rgba(180,180,180,0.2)'
            //     // },
            //     //每个柱子的样式
            //     itemStyle: {
            //         color: '#479AD3',
            //         borderRadius: 5,
            //         shadowColor: 'rgba(0,0,0,0.3)',
            //         shadowBlur: 5
            //     },
            // }
        ]
    }
    //3.通过实例填充图标
    myChart.setOption(option)
}
//检测来自父组件的数据变化更新图标
watch(() => props.data, () => {
    myChart.clear()
    renderChart()
})

</script>

<style scoped></style>